<template>
	<view class="content bg_com">
		<view class="header_warp row_center">
			<view class="tx" @click="changeAvatar">
				<image class="xj" src="../../static/xj.png" mode="scaleToFill"></image>
				<image class="img_val" v-if="user.avatar" :src="user.avatar" mode="scaleToFill"></image>
				<image class="img_val" v-else src="../../static/logo.jpg" mode="scaleToFill"></image>
			</view>
		</view>
		<!-- 操作菜单 -->
		<view class="info_list">
			<view class="_item row_center" @click="open(4)">
				<view class="left">
					<view class="name">
						昵称
					</view>
				</view>
				<view class="right row_center">
					<view class="tool">
						{{user.nick}}
					</view>
					<i class="iconfont icon-arrow-right"></i>
				</view>
			</view>
			<view class="_item row_center" @click="sexFun">
				<view class="left">
					<view class="name">
						性别
					</view>
				</view>
				<view class="right row_center">
					<view class="tool">
						{{(user.gender == 1) ? '男' : '女'}}
					</view>
					<i class="iconfont icon-arrow-right"></i>
				</view>
			</view>
			<view class="_item row_center" @click="timeSelect">
				<view class="left">
					<view class="name">
						生日
					</view>
				</view>
				<view class="right row_center">
					<view class="tool">
						{{user.birth | birthFormet}}
					</view>
					<i class="iconfont icon-arrow-right"></i>
				</view>
			</view>
			<view class="_item row_center" @click="open(5)">
				<view class="left">
					<view class="name">
						个性签名
					</view>
				</view>
				<view class="right row_center">
					<view class="tool">
						{{user.userDesc || '说点什么吧'}}
					</view>
					<i class="iconfont icon-arrow-right"></i>
				</view>
			</view>
		</view>
		<!-- 头像 -->
		<com-actionsheet-menu @actionsChange="actionsChangeTx" :title="'从相册选择'" :popType="2" ref="actionTx" />
		<!-- 性别 -->
		<com-actionsheet-menu @actionsChange="actionsChange" ref="action" />
		<!-- 日期选择 -->
		<com-picker-time ref="timeSelect" :startDate="user.birth" @confirm="birthChange" />
		<!-- 个性签名 -->
		<profile-modify @confirm="profileConfirm" :cursorSpacing="signInputHeight" :maxlen="32" :desc="user.userDesc" :popType="popType"
			:title="popTitle" ref="modify" />
		<!-- 昵称 -->
		<profile-modify @confirm="profileConfirm" :cursorSpacing="nickInputHeight" :maxlen="15" :desc="user.nick" :popType="popType" :title="popTitle"
			ref="nickModify" />
	</view>
</template>

<script>
	import {
		mapActions,
		mapState
	} from 'vuex';
	import utils from '../../common/utils.js'
	import cofigUrl from '../../common/config.js'
	export default {
		computed: mapState(['hasLogin', 'user', 'identity']),
		filters: {
			birthFormet: (val) => {
				let str = '--';
				if(!val) return '--';
				let date = new Date(val);
				str = utils.getNowTime(date,'yyyy-MM-dd');
				return str;
			}
		},
		data() {
			return {
				popType: 2,
				popTitle: '修改昵称',
				signInputHeight: uni.upx2px(170),
				nickInputHeight: uni.upx2px(78)
			}
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(() => {
				this.GetInfo({
					uid: this.identity.uid
				}).then(res => {
					uni.stopPullDownRefresh();
				}).catch(err => {
					uni.stopPullDownRefresh();
				});
			}, 500);
		},
		methods: {
			...mapActions(['GetInfo']),
			sexFun() {
				this.$refs.action.open();
				return;
				this.canSetGender();
			},
			close() {
				this.$refs.nickModify.close()
				this.$refs.modify.close()
			},
			open(index) {
				this.popType = index;
				if (index == 4) {
					this.popTitle = '修改昵称';
					this.$refs.nickModify.open()
				} else if (index == 5) {
					this.popTitle = '个性签名';
					this.$refs.modify.open()
				}
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']

			},
			/* 选择头像 */
			chooseImageFun(type) {
				let _this = this;
				console.log((type == 0) ? ['album'] : ['camera']);
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: (type == 0) ? ['album'] : ['camera'], //从相册选择
					success: function(chooseImageRes) {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: cofigUrl + 'impeach/upload', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							success: (uploadFileRes) => {
								let resutl = JSON.parse(uploadFileRes.data)
								_this.updateUserContent(resutl.data.url);
							}
						});
					}
				});
			},
			actionsChangeTx(e) {
				console.log('修改头像' + e.data.value)
				if (e.data.value != 2) {
					this.popType = 3;
					this.chooseImageFun(e.data.value)
				}
			},
			actionsChange(e) {
				this.setGender(e.data.value)
			},
			/* 时间选择 */
			timeSelect() {
				this.$refs.timeSelect.open()
			},
			/* 输入弹窗点击了确认 */
			profileConfirm(e) {
				console.log(e);
				this.updateUserContent(e.value);
			},
			/* 修改生日 */
			updateUser(birth) {
				this.$api.updateUser({
					birth,
					uid: this.identity.uid
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '修改成功'
						})
						this.GetInfo({
							uid: this.identity.uid
						});
					}
				})
			},
			/* 修改生日 */
			birthChange(e) {
				console.log(e)
				let date = new Date(e.data.replace(/-/g, "/"));
				this.updateUser(e.data);
			},
			/* 修改头像 */
			changeAvatar() {
				this.$refs.actionTx.open();
			},
			/* 设置性别 */
			setGender(gender) {
				this.$api.setGender({
					uid: this.identity.uid,
					gender: gender
				}).then(res => {
					if (res.code + '' === '200') {
						this.GetInfo({
							uid: this.identity.uid
						});
						uni.showToast({
							title: '设置成功'
						})
					}
				})
			},
			/* 验证用户是否可以设置性别 */
			canSetGender() {
				this.$api.canSetGender({
					uid: this.identity.uid
				}).then(res => {
					console.log(res);
					if (res.code + '' === '200') {
						this.$refs.action.open()
					}
				})
			},
			/* 设置用户信息 */
			updateUserContent(content) {
				this.$api.updateUserContent({
					content,
					uid: this.identity.uid,
					contentType: this.popType
				}).then(res => {
					this.GetInfo({
						uid: this.identity.uid
					});
					this.close();
					uni.showToast({
						title: '设置成功,审核通过后显示',
						icon: 'none'
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	@import "@/static/iconfont/iconfont.css";

	@font-face {
		font-family: 'iconfont';
		src: url('~@/static/iconfont/iconfont.ttf');
	}

	@import './index.scss';
</style>
